<template>
    <div style="margin:auto; width:400px;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男" value="男"></el-radio>
            <el-radio label="女" value="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telNum">
          <el-input v-model.number="ruleForm.telNum"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择类型">
            <!--<el-option label="请求服务器获得" value="shanghai"></el-option>-->
            <el-option v-for="option in options" :label="option.type" :value="option.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
          <el-input v-model.number="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model.number="ruleForm.addr"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  import axios from "../plugins/axios";
  import addPerson from "../pages/addPerson/addPerson";
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkTelNum = (rule,value,callback)=>{
        setTimeout(() => {

          if(!(/^1[3456789]\d{9}$/.test(value))){
            callback(new Error("手机号格式有误"));
          }else{
            callback();
          }
        }, 1000);
      };
      var checkEmail = (rule,value,callback)=>{
        setTimeout(() => {

          if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value))){
            callback(new Error("邮箱格式有误"));
          }else{
            callback();
          }
        }, 1000);
      }
      return {
        personId:"",
        ruleForm: {
          name: '',
          gender: '',
          age: '',
          telNum: '',
          type:'',
          email:'',
          addr:'',
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          telNum: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: checkTelNum, trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ],
          addr:[
            { required: true, message: '请输入地址', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        let that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(typeof (that.ruleForm.type));
            console.log(that.ruleForm.type);
            let param={
              "pname":that.ruleForm.name,
              "age":that.ruleForm.age,
              "psex":that.ruleForm.gender,
              "mobile":that.ruleForm.telNum,
              "address":that.ruleForm.addr,
              "email":that.ruleForm.email,
              "typeId":that.ruleForm.type,
              "userId":that.userid
            };
            if(that.personId!==""){
              param.id = that.personId;
            }
            console.log(param);
            axios.post("/personinfo/addOrUpdatePerson",param)
              .then(function (response) {
                if(response.data.code==1000){
                  that.$message({
                    showClose: true,
                    duration: 1500,
                    message: '操作成功',
                    type: 'success',
                    center: true,
                    onClose: function () {
                      location.reload()
                    }
                  });
                }
              }).catch(function(response){
              console.log(response)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addPersonInfo(){
        let that = this;
        let friend = that.selectFriend;
        if(friend){
          console.log(friend);
          that.ruleForm.name = friend.pname;
          that.ruleForm.age = friend.age
          that.ruleForm.gender = friend.psex;
          that.ruleForm.telNum = friend.mobile;
          that.ruleForm.addr = friend.address;
          that.ruleForm.email = friend.email;
          that.ruleForm.type = friend.type_id;
          that.personId = friend.id
        }
      }
    },
    props:{
      options:{
        type:Array,
        required:true
      },
      userid:{
        type:Number,
        required:false
      },
      selectFriend:{
        type:Object,
        required:false
      },
      modifyVisible:{
        type:Boolean,
        required:false
      }
    },
    mounted() {
      this.addPersonInfo();
    },
    watch:{
      modifyVisible:function(){
        let that = this;
        if(that.modifyVisible){
          this.addPersonInfo();
        }
      }
    }
  }
</script>
<style>
  .box-card {
    margin:20px auto;
    width: 600px;
  }
</style>
